<template>
	<view>
		<cu-custom bgColor="bg-gradual-pink" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">单词卡</block>
			<block slot="right"><view style="margin-right: 40upx ;"  @tap="showModal" data-target="ChooseModal" class="cuIcon-settingsfill lg"></view></block>
			
		</cu-custom>
		
		<view class="cu-modal bottom-modal" :class="modalName=='ChooseModal'?'show':''" @tap="hideModal">
			<view class="cu-dialog" @tap.stop="">
				<!-- <view class="cu-bar bg-white">
					<view class="action text-blue" @tap="hideModal">取消</view>
					<view class="action text-green" @tap="setinfo">确定</view>
				</view> -->
				<view class="grid col-3 padding-sm">
					<view v-for="(item,index) in checkbox" class="padding-xs" :key="index">
						<button class="cu-btn blue lg block" :class="item.checked?'bg-blue':'line-blue'" @tap="ChooseCheckbox"
						 :data-value="item.value"> {{item.name}}
						</button>
					</view>
				</view>
			</view>
		</view>
		
		<!-- <view class="cu-bar bg-white">
			<view class="action">
				<text class="cuIcon-title text-pink"></text>
				全部翻面
			</view>
			<view class="action"><switch @change="DotStyle" :class="dotStyle ? 'checked' : ''" :checked="dotStyle ? true : false"></switch></view>
		</view> -->
		<swiper
			class="card-swiper"
			:class="autoPlay ? 'square-dot' : 'wx-swiper-dot'"
			:indicator-dots="true"
			:circular="true"
			:autoplay="autoPlay"
			interval="5000"
			duration="500"
			:current="cuid"
			@change="cardSwiper"
			indicator-color="#8799a3"
			indicator-active-color="#0081ff"
		>
			<swiper-item v-for="(item, index) in wordList" :key="index">
				<view class="swiper-item">
					<view class="flex align-center container" mode="aspectFill">
						<view class="card" @click="Toggle(index)" :class="dotStyle ? 'f1' : isSelect == index ? { f1: activeClass } : ''">
							<view class="front bg-gradual-blue text-white text-xxl text-bold">
								{{ item.name }}

								<view @click="speak(item.name)" class="cuIcon-notificationfill lg" style="padding-top: 60upx;"></view>
							</view>
							<view class="back bg-gradual-purple text-white text-xxl text-bold">{{ item.explain }}
							<view @click="speakZh(item.explain)" class="cuIcon-notificationfill lg" style="padding-top: 60upx;"></view>
							
							</view>
						</view>
					</view>
				</view>
			</swiper-item>
		</swiper>
		<view class="content">
			
			<imt-audio
				@a_even="a_even"
				continue:autoPlay
				:src="audiosrc + wordList[now].name + '.mp3'"
				:duration="3"
				:volume="volume"
				@prev="now = now === 0 ? wordList.length - 1 : now - 1"
				@next="now = now === wordList.length - 1 ? 0 : now + 1"
			></imt-audio>
			<!-- 
				 src: String 音频链接*必须*
				 duration: Number 总时长（单位：s）*必须*
				 autoplay: Boolean 是否自动播放*默认false*
				 control: Boolean 是否需要上一曲/下一曲按钮*默认true*
				 continue:Boolean 播放完成后是否继续播放下一首，需定义@next事件*默认false*
				 color: String 主色调*默认#169af3*
				 @prev:点击上一首按钮
				 @next:点击下一首按钮
			  -->
			<view class="list" :class="{ active: key === now }" v-for="(item, key) in wordList" :key="key" @click="selectwords(key)">
				<view class="list-title">{{ item.name }}-{{ item.explain }}</view>
				<image class="list-pic" src="http://mouyizhan.com/music.gif"></image>
			</view>
		</view>
	</view>
</template>

<script>
import imtAudio from 'components/imt-audio/imt-audio';
export default {
	data() {
		return {
			cardCur: 0,
			dotStyle: false,
			autoPlay: false,
			towerStart: 0,
			direction: '',
			wordList: [],
			activeClass: false, // 0为默认选择第一个，-1为不选择
			isSelect: -1,
			cid: 0,
			wid: 0,
			audiosrc: 'http://media.shanbay.com/audio/us/',
			now: 0,
			volume:0,
			modalName: null,
			checkbox: [{
				value: 0,
				name: '默认开启发音',
				checked: false,
				hot: false,
			}, {
				value: 1,
				name: '全部显示背面',
				checked: false,
				hot: false,
			},]
		};
	},
	onLoad(options) {
		this.cuid = options.wid;
		this.now = options.wid;
		this.cid = options.cid;
		//console.log(">>>"+this.now);
		//this.cuid=this.wid;
		this.loadData();

		// 初始化towerSwiper 传已有的数组名即可
	},
	methods: {
		 a_even(e){
				this.autoPlay=e;//获取子组建的值
		     // console.log('even',e) //e的值，就为子组件内，a_even事件的事件参数
		 },
		 
		 speak(wordsname) {
			//备用接口
			var urlen="https://ss0.baidu.com/6KAZsjip0QIZ8tyhnq/text2audio?tex="+wordsname+"&cuid=dict&lan=en&ctp=1&pdt=30&vol=100&spd=3";
			//var urlen2='http://media.shanbay.com/audio/us/' + wordsname + '.mp3';

			const innerAudioContext = uni.createInnerAudioContext();
			innerAudioContext.autoplay = true;
			innerAudioContext.src = urlen;
			innerAudioContext.onPlay(() => {
				console.log('开始播放');
			});
			innerAudioContext.onError(res => {
				console.log(res.errMsg);
				console.log(res.errCode);
			});
		},
		speakZh(explain){
			/*
			lan=zh 设置语言，en或则zh
			*/
			var url="https://ss0.baidu.com/6KAZsjip0QIZ8tyhnq/text2audio?tex="+explain+"&cuid=dict&lan=zh&ctp=1&pdt=30&vol=100&spd=3";
			
			
			const innerAudioContext = uni.createInnerAudioContext();
			innerAudioContext.autoplay = true;
			innerAudioContext.src = url;
			innerAudioContext.onPlay(() => {
				console.log('开始播放');
			});
			innerAudioContext.onError(res => {
				console.log(res.errMsg);
				console.log(res.errCode);
			});
			
		},
		showModal(e) {
			this.modalName = e.currentTarget.dataset.target
		},
		hideModal(e) {
			this.modalName = null
		},
		// setinfo(e){
		// 	this.dotStyle=this.checkbox[1].checked;
			
		// 	 console.log("11"+this.checkbox[0].checked);
		// 	 console.log("11"+this.checkbox[1].checked);
			
		// },
		ChooseCheckbox(e) {
			let items = this.checkbox;
			let values = e.currentTarget.dataset.value;
			for (let i = 0, lenI = items.length; i < lenI; ++i) {
				if (items[i].value == values) {
					items[i].checked = !items[i].checked;
					this.dotStyle=items[1].checked;
					if(items[0].checked){
						this.volume=1;
					}else{
						this.volume=0;
					}
					console.log(this.volume);
					
					break
				}
			}
		},
		loadData() {
			//获取数据
			uni.request({
				url: this.urlDataAsync + 'word/get/' + this.cid, //仅为示例，并非真实接口地址。
				data: {},
				header: {
					'content-type': 'application/json' // 微信默认就是
				},
				success: res => {
					if (res.data.result.count > 0) {
						this.wordList = res.data.result.list;
					}

					//	console.log(JSON.stringify(this.wordList));
				}
			});
		},
		selectwords(skey) {
			this.now = skey;
			this.cuid = skey;
			
		},
		Toggle(index) {
			this.activeClass = !this.activeClass;
			this.isSelect = index;
			//console.log(">>>>"+this.isSelect);
		},
		
		// DotStyle(e) {
		// 	this.dotStyle = e.detail.value;
			
		// },

		// cardSwiper
		cardSwiper(e) {
			this.cardCur = e.detail.current;
			this.activeClass = false;
			this.now = e.detail.current;
			this.cuid = e.detail.current;
			//this.volume=0;
			//console.log(">>>"+this.volume);
		
			//console.log(">>>"+e.detail.current);
		}
		// towerSwiper
	},
	components: {
		imtAudio
	}
};
</script>

<style>
@import '../../colorui/animation.css';
.tower-swiper .tower-item {
	transform: scale(calc(0.5 + var(--index) / 10));
	margin-left: calc(var(--left) * 100upx - 150upx);
	z-index: var(--index);
}
.card-swiper {
	height: 701upx !important;
}

page {
	background: #f5f5f5;
}
.content {
	padding: 20upx;
}

.list {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0 30upx;
	background: #fff;
	border-radius: 10upx;
	margin-top: 20upx;
	color: #333;
}

.list-title {
	font-size: 28upx;
	line-height: 88upx;
}

.list-pic {
	display: none;
	width: 28upx;
	height: 28upx;
}

.active {
	background: #169af3;
	color: #fff;
}

.active .list-pic {
	display: block;
}

/********翻转*********/

.container {
	margin: 0px;
	width: 100%;
	height: 100%;
	perspective: 100%;
}
.card {
	width: 100%;
	height: 100%;
	transition: transform 2s;
	transform-style: preserve-3d;
	cursor: pointer;
}
.front,
.back {
	width: 100%;
	height: 100%;
	position: absolute;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	backface-visibility: hidden;
}
.front {
	width: 100%;
	height: 100%;
	border: 2px solid black;
	transform: rotateY(0deg);
	/* background-color: pink; */
}
.front:hover {
	width: 100%;
	height: 100%;
	bottom: 2px;
	left: 2px;
	box-shadow: 0px 0px 20px 1px #000;
}
.back {
	width: 100%;
	height: 100%;
	border: 2px solid black;
	/* background-color: blue; */
	transform: rotateY(180deg);
}
.back:hover {
	width: 100%;
	height: 100%;
	bottom: 2px;
	right: 2px;
	box-shadow: 0px 0px 20px 1px #000;
}

.f1 {
	transform: rotateY(180deg);
}
.grid.col-3>uni-view {
    width: 100%;
}
/* .f2{
	transform:rotateY(0deg)
} */
/********翻转*********/
</style>
